/**
 * Created by Junchuan.Wu on 2015/11/14 0014.
 * 自制时钟
 */
var canvas,//canvas元素
    ctx,//Context对象
    radgrad,
    radgrad2;
window.setInterval(function () {
    var h = new Date().getHours(),
        m = new Date().getMinutes(),
        s = new Date().getSeconds(),
        ms = new Date().getMilliseconds();
    out.innerHTML = "当前系统时间为：" + h + ":" + m + ":" + s + ":" + ms
}, 1000);

function drawFrame() {
    with (Math) {
        var h = new Date().getHours(),
            m = new Date().getMinutes(),
            s = new Date().getSeconds(),
            ms = new Date().getMilliseconds();
        ctx.fillStyle = radgrad2;
        Circle(ctx, 0, 0, canvas.width / 2);
        ctx.fill();
        ctx.fillStyle = radgrad;
        Circle(ctx, 10, 10, canvas.width / 2 - 10);
        ctx.fill();
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        Circle(ctx, 5, 5, 20);
        ctx.fill();
        ctx.stroke();
        Circle(ctx, 25, 25, .1);
        ctx.fill();
        ctx.stroke();
        ctx.fillStyle = "#000";
        Circle(ctx, 145, 145, 5);
        ctx.fill();
        ctx.lineCap = "round";

        var off, coor, coor2;

        // 数字与刻度
        ctx.font = "22px 微软雅黑";
        off = ctx.measureText("12").width;
        ctx.fillText("12", 150 - off / 2, 25);
        off = ctx.measureText("6").width;
        ctx.fillText("6", 150 - off / 2, canvas.height - 13);
        off = ctx.measureText("3").width;
        ctx.fillText("3", canvas.width - off * 2, canvas.height / 2 + 22 / 4);
        off = ctx.measureText("9").width;
        ctx.fillText("9", off, canvas.height / 2 + 22 / 4);

        ctx.fillStyle = "rgb(0,0,0)";
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.lineWidth = 1;
        for (i = 0; i < 12; i++) {
            if (i != 0 && i != 3 && i != 6 && i != 9) {
                coor = findPoint(150, 150, 125, ( (i / 6) * PI) - .5 * PI);
                coor2 = findPoint(150, 150, 135, ( (i / 6) * PI) - .5 * PI);
                ctx.beginPath();
                ctx.moveTo(coor.x, coor.y);
                ctx.lineTo(coor2.x, coor2.y);
                ctx.stroke();
            }
        }
        for (i = 0; i < 120; i++) {
            coor = findPoint(150, 150, 135, ( (i / 60) * PI) - .5 * PI);
            coor2 = findPoint(150, 150, 140, ( (i / 60) * PI) - .5 * PI);
            ctx.beginPath();
            ctx.moveTo(coor.x, coor.y);
            ctx.lineTo(coor2.x, coor2.y);
            ctx.stroke();
        }


        // 毫秒
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        ctx.beginPath();
        ctx.moveTo(25, 25);
        coor = findPoint(25, 25, 20, ( (ms / 30) * PI) - .5 * PI);
        ctx.lineTo(coor.x, coor.y);
        ctx.stroke();

        // 秒
        ctx.strokeStyle = "rgb(255,0,0)";
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.moveTo(150, 150);
        s = s + ms / 1000;
        coor = findPoint(150, 150, 136, ( (s / 30) * PI) - .5 * PI);
        ctx.lineTo(coor.x, coor.y);
        ctx.stroke();
        Circle2(ctx, coor.x, coor.y, 3);
        ctx.fill();

        // 分钟
        ctx.strokeStyle = "rgb(255,125,0)";
        ctx.fillStyle = "rgb(255,125,0)";
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(150, 150);
        m = m + s / 60;
        coor = findPoint(150, 150, 100, ( (m / 30) * PI) - .5 * PI);
        ctx.lineTo(coor.x, coor.y);
        coor2 = findPoint(150, 150, 95, ( ((m - .5) / 30) * PI) - .5 * PI);
        ctx.lineTo(coor2.x, coor2.y);
        ctx.moveTo(coor.x, coor.y);
        coor2 = findPoint(150, 150, 95, ( ((m + .5) / 30) * PI) - .5 * PI);
        ctx.lineTo(coor2.x, coor2.y);
        ctx.stroke();


        // 小时
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.moveTo(150, 150);
        h = h + m / 60;
        coor = findPoint(150, 150, 55, ( (h / 6) * PI) - .5 * PI);
        ctx.lineTo(coor.x, coor.y);
        ctx.stroke();
        window.setTimeout(drawFrame, 30);
    }
}

function findPoint(cx, cy, r, a) {
    with (Math) {
        var x = parseInt(cx + r * cos(a)),
            y = parseInt(cy + r * sin(a));
        return {x: x, y: y}
    }
}

function Circle(ctx, x, y, r) {
    ctx.beginPath();
    ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true);
}
function Circle2(ctx, x, y, r) {
    ctx.beginPath();
    with (Math) {
        ctx.arc(x, y, r, 0, PI * 2, true);
    }
}
